<template>
    <div class="sort-table">
        <el-dialog
            :title="type == 1 ? '模块排序' : '菜单排序'"
            :visible="sortVisible"
            width="600px"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div class="sort-fr">
                <!-- <el-button type="primary" size="mini" @click="handleSort('restore')" class="el-icon-sort">
                    排序
                </el-button>
                <el-button type="success" size="mini" @click="handleSort('reverse')" class="el-icon-sort">
                    倒序
                </el-button> -->
                <el-button
                    type="primary"
                    size="mini"
                    @click="handleSort('top')"
                    :disabled="isTop"
                    class="el-icon-download"
                >
                    置顶
                </el-button>
                <el-button type="success" size="mini" @click="handleSort('up')" :disabled="isTop" class="el-icon-top">
                    上移
                </el-button>
                <el-button
                    type="warning"
                    size="mini"
                    @click="handleSort('down')"
                    :disabled="isBottom"
                    class="el-icon-bottom"
                >
                    下移
                </el-button>
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleSort('bottom')"
                    :disabled="isBottom"
                    class="el-icon-upload2"
                >
                    置底
                </el-button>
            </div>
            <div style="height: 450px">
                <div class="tab">
                    <Table
                        :data="currentData"
                        :columns="columns"
                        :isPagination="false"
                        :showNo="true"
                        :rowData.sync="rowData"
                        @getShow="getShow"
                        :maxHeight="430"
                    ></Table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// handleRowClick
export default {
    props: {
        menuData: {
            type: Array,
            default: () => []
        },
        sortVisible: {
            type: Boolean,
            default: false
        },
        columns: {
            type: Array,
            default: () => []
        },
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            rowData: {},
            isReverse: false,
            isTop: false,
            isBottom: false,
            currentData: [],
            num: 0
        }
    },
    computed: {
        // menuData() {
        //     this.currentData = this.menuData
        // },
        theme() {
            return this.$store.state.settings.theme
        }
    },
    watch: {
        menuData() {
            this.currentData = this.menuData
        },
        rowData() {
            this.getShow()
        }
    },
    methods: {
        handleClose() {},
        getShow() {
            const oldIndex = this.getArrIndex(this.currentData, this.rowData)
            console.log('oldIndex', oldIndex)
            if (oldIndex == 0) {
                this.isTop = true
            } else {
                this.isTop = false
            }
            if (oldIndex + 1 == this.currentData.length) {
                this.isBottom = true
            } else {
                this.isBottom = false
            }
        },
        handleSort(type) {
            let oldIndex = this.getArrIndex(this.currentData, this.rowData)
            console.log(this.currentData)
            if (!oldIndex) {
                this.$message({ message: '请先在下面选择哦~~~', type: 'success' })
                return
            }
            let thisData = this.currentData
            const oldData = JSON.parse(JSON.stringify(this.currentData))
            //  this.getShow()

            switch (type) {
                case 'up': // 上移
                    thisData.splice(oldIndex - 1, 0, this.rowData)
                    thisData.splice(oldIndex + 1, 1)
                    if (oldIndex == 1) {
                        this.isTop = true
                        this.$message({ message: '到顶了', type: 'success' })
                        return
                    }
                    this.oldIndex = oldIndex--
                    break
                case 'down': // 下移
                    thisData.splice(oldIndex + 2, 0, this.rowData)
                    thisData.splice(oldIndex, 1)
                    if (oldIndex + 1 == this.rowData.length) {
                        this.isBottom = true
                        this.$message({ message: '到底了', type: 'success' })
                        return
                    }
                    this.oldIndex = oldIndex++
                    break
                case 'top': // 置顶
                    thisData.unshift(this.rowData)
                    thisData.splice(oldIndex + 1)
                    if (oldIndex == 1) {
                        this.isTop = true
                        this.$message({ message: '到顶了', type: 'success' })
                        return
                    }
                    break
                case 'bottom': // 置地
                    thisData.push(this.rowData)
                    thisData.splice(oldIndex, 1)
                    if (oldIndex + 1 == this.rowData.length) {
                        this.isBottom = true
                        this.$message({ message: '到底了', type: 'success' })
                        return
                    }
                    break
                case 'reverse': // 倒序
                    if (this.isReverse) return
                    thisData.reverse()
                    this.isReverse = true
                    break
                case 'restore': // 排序
                    thisData = oldData
                    break
                default:
                    break
            }
            const params = thisData.map((item, index) => {
                return Object.assign({}, item, {
                    index
                })
            })
            this.currentData = params
            console.log('入参:', params)
        },
        handleSubmit(item) {
            console.log('payload-row', item)
            const { oldIndex } = item
            const oldTableData = this.menuData
            oldTableData.splice(oldIndex + 2, 0, item)
            oldTableData.splice(oldIndex, 1)
            console.log('oldInoldTableDatadex', oldTableData)
        },
        getArrIndex(arr, obj) {
            let index = null
            let key = Object.keys(obj)[0]
            arr.every(function (value, i) {
                if (value[key] === obj[key]) {
                    index = i
                    return false
                }
                return true
            })
            return index
        },
        handleClose() {
            this.isBottom = false
            this.isTop = false
            this.$emit('update:sortVisible', false)
        }
    }
}
</script>
<style lang="scss">
.sort-table {
    div,
    span {
        cursor: pointer;
    }
    .tab {
        float: left;
        width: 360px;
        margin-left: 30px;
    }
    .current-row td {
        //  background-color: #{'var(--theme)'} !important;
        background: red !important;
        color: #ffffff !important;
        cursor: pointer;
    }
    .sort-fr {
        margin-bottom: 10px;
        margin-left: 10px;
        button {
            margin-bottom: 10px;
            margin-top: 10px;
        }
    }
}
</style>
